<template>
  <div
    class="home"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <basic-container>
      <div v-if="!loading">
        <Board v-if="department.indexOf('教育局') > -1"></Board>
        <Student v-else-if="useridentify == '学生'"></Student>
        <School v-else></School>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import indexpng from "./index.png";
import { getUserInfo } from "@/api/system/user";
import School from "./identify/school.vue";
import Board from "./identify/board.vue";
import Student from "./identify/student.vue";
export default {
  name: "wel",
  data() {
    return {
      indexpng,
      centerDialogVisible: false,
      activeNames: ["1", "2", "3", "5"],
      logActiveNames: ["25"],
      projectList: [],
      useridentify: "",
      contain: "contain",
      loading: true,
      option: {
        index: true,
        addBtn: false,
        menu: false,
        refreshBtn: false,
        columnBtn: false,
        maxHeight: 250,
        border: true,
        column: [
          {
            label: "姓名",
            prop: "userName",
          },
          {
            label: "年级",
            prop: "gradeName",
          },
          {
            label: "班级",
            prop: "className",
          },
          {
            label: "预警级别",
            prop: "level",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=warning_level",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "number",
          },
        ],
      },
      data: [],
      department: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  watch: {
    userInfo: {
      handler(val) {
        getUserInfo(val.userId).then(async (res) => {
          this.useridentify = res.data.data.roleName;
          this.department = res.data.data.deptName;
          this.loading = false;
        });
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    handleChange() {
      // console.log(val);
    },
    open() {
      this.$alert(
        "<strong>这是 <i>HTML</i> 片段</strong>",
        "请选择学校或机构",
        {
          dangerouslyUseHTMLString: true,
          showClose: false,
          showCancelButton: false,
          showConfirmButton: false,
        }
      );
    },
    goToTestDetails() {
      this.$router.push({
        name: "心理测评详情",
        query: { projectId: this.projectList[0].projectId },
      });
    },
    goSkip(item) {
      this.$router.push({
        name: item.name || "我的待办",
      });
    },
    getMeasure() {},
  },
  components: {
    School,
    Board,
    Student,
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
}
.el-divider--horizontal {
  margin: 12px 0 !important;
}
.el-font-size {
  font-size: 14px;
}
.ulist {
  border-bottom: 1px solid #ccc;
  line-height: 40px;
}
.ulist_right {
  display: inline-block;
  float: right;
  margin-top: 18px;
}
.title {
  display: inline-block;
  font-size: 18px;
  text-align: center;
  padding: 30px 0;

  .none-img {
    width: 180px;
  }
}
.button-div {
  text-align: center;
}

.home-img {
  img {
    width: 100%;
  }
}
.home-option {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 10px;

  > div {
    width: 30%;
    // height: 130px;
    height: 5vh;
    margin-top: 10px;
    color: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
  }
}

.home-table {
  .home-tips {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    margin: 10px 0;

    .more {
      color: rgb(67, 147, 255);
    }
  }

  ::v-deep.avue-crud__menu {
    height: 0 !important;
    min-height: 0 !important;
  }
}

.home-title {
  font-size: 30px;
  font-weight: bold;
}

.student-number {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: white;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    // width: 23%;
    // height: 13vh;
    width: 30vh;
    min-width: 160px;
    max-width: 22%;
    height: 13vh;
    min-height: 60px;
    max-height: 80px;
    border-radius: 10px;

    .number {
      font-size: 24px;
    }
  }
}

.home-to {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 40px 0;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 100px;

    img {
      width: 60px;
    }
  }
}
</style>

